<template>
    <div class="ranking column">
        <h1 class="page-title">电影排行榜</h1>
        <h2>JJ新片榜 · · · · · · </h2>
        <div class="movie-list column"
            v-for="(item, index) in 14"
            :key="index">
            <RankCardBox :info="newInfo"></RankCardBox>
        </div>
        <div class="bottom">
            <img src="../assets/img/bottom-img1.jpg"
                alt="">
        </div>
    </div>
</template>
<script>
import RankCardBox from "@/components/RankCardBox"
export default {
    name: "ranking",
    components: {
        RankCardBox
    },
    data() {
        return {
            newInfo: {
                title: "黑镜：潘达斯奈基 / 黑镜：2018圣诞特别篇",
                content:
                    "2018-12-28(美国) / 菲恩·怀特海德 / 克雷格·帕金森 / 爱丽丝·洛维 / 阿西姆·乔杜里 / 威尔·保尔特 / 塔露拉·哈登 / 卡特里奥·诺克斯 / 保罗·布拉德利 / 乔纳森·阿里斯 / A·J·霍顿 / 弗勒尔·基思 / 劳拉·埃弗兰 / 阿伦·阿萨德 / 苏珊妮·伯登...",
                peopleNum: 2213,
                imgNumber: 3.5
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .ranking {
        margin-top: 30px;
        h2 {
            font: 15px Arial, Helvetica, sans-serif;
            color: #072;
            margin: 0 0 12px 0;
            line-height: 150%;
        }
        .movie-list {
        }
        .bottom {
            width: 100%;
            height: 110px;
        }
    }
</style>
